<template>
    <div>
        <van-nav-bar
  title="使用咖啡钱包"
  
  right-text="不使用"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

<div class="box"  >
    <div ><div>标准美式</div>21￥</div>
    <div>不加糖，加辣椒，少盐！！</div>
    <div>不适用优惠券</div>
</div>

<div class="bot">
<div> 恢复默认 </div>
<div @click="Next">确认</div>
</div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import {useRouter} from 'vue-router'

const router=useRouter()
 const onClickLeft = () => history.back('/use');
const onClickRight = () => showToast('按钮');
const Next=()=>{
    router.push('/select')
}
</script>

<style lang="scss" scoped>
.box{
    width: 90%;
    height: 150px;
    margin: 5%;
    background-color: white;
    border-radius: 5px;
    :nth-child(1){
        display: flex;
        justify-content: space-between;
        height: 50px;
        margin-left: 10px;
    }
    :nth-child(2){
       font-size: 14px;
       
        height: 50px;
        margin-left: 10px;
    }
    :nth-child(3){
        font-size: 14px;
     
        height: 50px;
        color: rgb(40, 98, 185);
        margin-left: 10px;
    }
}
.bot{
width: 100%;
height: 100px;
background-color: white;
display: flex;
justify-content: space-around;
position: fixed;
top:90% ;
:nth-child(1){
   width: 120px;
    height: 50px;
    margin-top: 10px;
    line-height: 50px;
    text-align: center;
    border: 1px solid rgb(32, 105, 194) ;
    border-radius: 5px;
    color:rgb(32, 105, 194)
}
:nth-child(2){
   width: 120px;
   margin-top: 10px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 5px;
    background-color: rgb(45, 112, 188);
    color:white
}


}

</style>